<template>
    <div class="listWrap">
        <div class="searchList" ref="search">
            <div class="iptWrap" style="width: 200px;margin-right: 0;">
                <el-input placeholder="请输入关键词" v-model="query.keyword"
                          @keyup.enter.native="search"
                          @blur="search"></el-input>
                <i class="el-icon-search" @click="search"></i>
            </div>
        </div>
        <div class="tableContent">
            <el-table
                    :data="tableData"
                    height="500"
            >
                <#list entityInfo.propRemarks? keys as key>
                    <el-table-column
                            prop="${key}"
                            min-width="100"
                            label="${entityInfo.propRemarks['${key}']}">
                    </el-table-column>
                </#list>

                <el-table-column
                        fixed="right"
                        width="200"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="primary" size="medium">更新</el-button>
                        <el-button @click="delete(scope.row)" type="danger" size="medium">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination
                background
                :page-size="20"
                :page-sizes="[10, 20, 30, 50, 100]"
                :pager-count="9"
                layout="prev, pager, next"
                :total="total"
                @current-change="currentPageChange">
        </el-pagination>
    </div>
</template>
<script>
import API from '@/service/apiService';
export default {
    data () {
        return {
            total: 0,
            tableData: [],
            tokenId: '',
            query: {
                keyword: '',
                currentPage: 1
            }
        };
    },
    methods: {
        search (val) {
            console.log(val);
            this.query.keyword = this.query.keyword.trim();
            this.getData();
        },
        async getData () {
            try {
                const res = await API.${className}(this.query);
                if (res.code === 0) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }
            } catch (e) {
                this.$message.error(e.message);
            }
        },
        currentPageChange (page) {
            this.query.currentPage = page;
            this.getData();
        }
    },
    created () {
        this.tokenId = window.localStorage.getItem('tk');
        this.getData();
    }
};
</script>
<style lang="scss" scoped>
    .listWrap{
        position: absolute;
        top: 0px;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #fff;
    .searchList{
        height: 80px;
        padding: 0 20px;
    .iptWrap{
        height: 42px;
        width: 250px;
        float: left;
        margin-top: 24px;
        margin-right: 15px;
        position: relative;
    }
    .el-input{
        width: 100%;
        height: 100%;
    }
    .el-icon-search{
        position: absolute;
        top: 13px;
        right: 10px;
        cursor: pointer;
    }
    }
    .tableContent{
        position: absolute;
        top: 80px;
        bottom: 50px;
        left: 0;
        right: 0;
        overflow: auto;
        padding: 0 20px;
        border-bottom: none;
    .el-table{
        position: absolute;
        left: 24px;
        right: 24px;
        top: 0;
        bottom: 0;
        width: auto!important;
        height: auto!important;
        overflow: auto;
    }
    .el-table::before{
        height: 0!important;
    }
    }
    .el-pagination{
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }
    }
</style>
